<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-button type="primary" @click="onVisible(1)">发布新版</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="title" label="更新标题" width="150" align="center" />
      <el-table-column prop="contents" label="更新内容" align="center" />
      <el-table-column prop="url" label="下载地址" align="center" />
      <el-table-column prop="version" label="版本号" width="100" align="center" />
      <el-table-column prop="apptype" label="安装包类型" width="150" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.apptype == 1" type="success">安卓</el-tag>
          <el-tag v-if="row.apptype == 2" type="danger">苹果</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="mandatory" label="更新方式" width="150" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.mandatory == 0" type="success">不更新</el-tag>
          <el-tag v-if="row.mandatory == 1" type="danger">强制更新</el-tag>
          <el-tag v-if="row.mandatory == 2" type="warning">热更新</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="100" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.state == 0" type="info">无效</el-tag>
          <el-tag v-if="row.state == 1" type="success">有效</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ctime" label="更新时间" align="center" width="160">
        <template slot-scope="{row}">
          <span>{{ row.ctime.replace('T', ' ') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="onVisible(2, row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="onDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block " style="padding-top: 20px;">
      <el-pagination background :current-page="PageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="idx => { pageSize = idx }"
        @current-change="idx => { PageIndex = idx }" />
    </div>

    <!-- 新增/修改APP版本信息 -->
    <el-dialog :title="visibleType == '1' ? '新增' : '编辑'" :visible.sync="dialogVisible" width="40%"
      :close-on-click-modal="false" @closed="handleClose()">
      <el-form ref="forms" :rules="rulesModel" :model="from" label-width="80px">
        <el-form-item label="更新方式" prop="mandatory">
          <el-radio-group v-model="from.mandatory">
            <el-radio :label="1">强制更新</el-radio>
            <el-radio :label="2">热更新</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="平台">
          <el-radio-group v-model="from.apptype">
            <el-radio :label="1">安卓</el-radio>
            <el-radio :label="2">苹果</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="更新标题" prop="title">
          <el-input v-model="from.title" placeholder="请输入更新标题" />
        </el-form-item>
        <el-form-item label="更新内容" prop="contents">
          <el-input v-model="from.contents" type="textarea" placeholder="请输入更新内容" />
        </el-form-item>
        <el-form-item label="上传安装包" prop="url" label-width="200">
          <el-upload action="/" :http-request="upLoad" class="avatar-uploader" :show-file-list="false"
            :before-upload="quillImgBefore">
            <el-button size="mini" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="from.url" label="下载地址">
          <span>{{ from.url }}</span>
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <template v-if="from.mandatory == 1">
            <el-input v-model="from.version" placeholder="当前版本号, 必须大于当前线上发行版本号" />
          </template>
          <template v-if="from.mandatory == 2">
            <el-input v-model="from.version" placeholder="当前版本号, 必须大于当前线上发行版本号" @change="changeValue" />
            <span class="tips_text">注意： 热更新的版本号需输入正整数(例:100)</span>
          </template>
        </el-form-item>

        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="from.state">
            <el-radio :label="1">有效</el-radio>
            <el-radio :label="0">无效</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import store from '@/store'
import { GetAppVersion, AppVersionEdit, AppVersionDel } from '@/api/sysconfig.js'
// import { GetDictionaryValue } from '@/api/Public.js'
export default {
  name: 'Name',
  data() {
    return {
      /** 列表筛选查询字段 */
      type: 0, // APP类型：0全部 1商城端app 2商家端app 3债务端app

      /** 主列表部分字段 */
      listLoading: false,
      PageIndex: 1,
      pageSize: 10,
      tableData: [],
      totalCount: 0,

      /** 弹窗部分字段 */
      dialogVisible: false,
      visibleType: '', // 弹窗类型：新增/修改
      from: {},
      rulesModel: {
        title: [
          { required: true, message: '请输入更新标题', trigger: 'blur' }
        ],
        contents: [
          { required: true, message: '请输入更新内容', trigger: 'blur' }
        ],
        apptype: [
          { required: true, message: '请选择安装包类型', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入安装包地址', trigger: 'blur' }
        ]
      },
      urlPrefix: '' // 下载地址前缀
    }
  },
  watch: {
    PageIndex(val) {
      console.log(val)
      this.getData()
    },
    pageSize(val) {
      console.log(val)
      this.getData()
    }
  },
  created() {
  },
  async mounted() {
    this.getData()
  },
  methods: {
    // ///////////////////////////////////////////////// 搜索 ////////////////////////////////////////////////
    /** 搜索 */
    async onSearch() {
      this.PageIndex = 1
      this.getData()
    },
    // ///////////////////////////////////////////////// 事件监听 ////////////////////////////////////////////////
    // 图片上传前
    quillImgBefore(file) {
      const fileName = file.name
      const reg = this.from.mandatory == 1 ? /.apk$/ : /.wgt$/
      if (reg.test(fileName)) {
        return true
      } else {
        this.$message.error('请插入以' + (this.from.mandatory == 1 ? '.apk' : '.wgt') + '结尾的文件')
        return false
      }
    },
    // 执行上传
    upLoad(file) {
      this.$submitFile(file, (data) => {
        this.from.url = data.url
      })
    },
    // 校验是否输入整数
    changeValue(value) {
      if (Math.floor(value) != value) {
        this.$message({
          message: '请输入大于上一版本号的正整数',
          type: 'error'
        })
        this.from.version = ''
      }
    },
    // ///////////////////////////////////////////////// 点击事件 ////////////////////////////////////////////////
    // 关闭前
    handleClose() {
      this.$refs.forms.clearValidate()
    },
    // 打开前
    onVisible(type, item = {}) {
      this.visibleType = type
      if (this.visibleType == 1) {
        this.from = {
          version: '', // 版本号
          title: '', // 更新标题
          contents: '', // 更新内容
          mandatory: 1, // 更新方式
          url: '', // 下载地址
          state: 1, // 更新状态
          apptype: 1 // 安装包类型
        }
      } else {
        this.from = { ...this.from, ...item }
      }
      console.log(this.from)
      this.dialogVisible = true
    },
    // ///////////////////////////////////////////////// 网络获取 ////////////////////////////////////////////////
    /** 获取主列表 */
    async getData() {
      this.listLoading = true
      const {
        list,
        pageCount
      } = await GetAppVersion({
        PageIndex: this.PageIndex,
        PageSize: this.pageSize,
        Plattype: 0
      })
      this.listLoading = false
      this.totalCount = pageCount
      this.tableData = list
      // console.log(this.tableData)
    },
    /** 新增编辑提交 */
    async submit() {
      try {
        await this.$refs['forms'].validate()
      } catch (e) {
        console.log(e)
        return
      }

      // 拼接安装包下载地址
      // 不同端给不同的文件夹名
      // let type;
      // if (this.from.apptype == 1) {
      //     type = 'mall';
      // } else if (this.from.apptype == 2) {
      //     type = 'merchant';
      // } else if (this.from.apptype == 3) {
      //     type = 'debt';
      // }
      // // 端口
      // let port = store.getters.isTest ? '8099' : '8098';
      // if (store.getters.isFormal) { // 如果正式环境 文件夹名加‘_Online’ 后缀
      //     type = type + '_Online';
      // }
      // this.from.url = this.urlPrefix + ':' + port + '/' + type + '/' + this.from.version + (this.from.mandatory == 1 ? '.apk' : '.wgt');

      console.log(this.from)
      const { success, msg } = await AppVersionEdit(this.from)
      if (success) {
        this.getData()
        this.dialogVisible = false
      }
      this.$message({
        message: msg,
        type: success ? 'success' : 'error'
      })
    },
    /** 删除操作 */
    async onDelete(item) {
      try {
        const confirm = await this.$confirm(
          '此操作将删除此版本信息, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        if (confirm == 'confirm') {
          const { success, msg } = await AppVersionDel({
            id: item.id
          })
          if (success) {
            this.getData()
          }
          this.$message({
            message: msg,
            type: success ? 'success' : 'error'
          })
        }
      } catch (e) {
        // 取消
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.tips_text {
  color: #F56C6C;
}
</style>
